import Head from 'next/head';
import { Contributors } from '../components/mdx/Contributors';
import { FAQs } from '../components/mdx/FAQs';

<Head>
  <title>About - Material React Table</title>
  <meta
    name="description"
    content="About Material React Table. A fully-featured table component library for React based on TanStack Table V8 and Material Design."
  />
</Head>

## About Material React Table

Material React Table is a fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.

### What is Material React Table?

Material React Table (MRT) is a fully-featured data grid/table component library for React built on [TanStack Table V8's](https://react-table.tanstack.com/) powerful API. MRT is meant to work best in projects already using [Material UI](https://material-ui.com/) components, but it is not necessarily required. However, be aware that [Material UI](https://material-ui.com/) and [Emotion](https://emotion.sh/) are required as peer dependencies for MRT to work.

MRT is built from the ground up in TypeScript, and is designed to have a great type-safe dev experience with generics that react to the data structures you pass in. TypeScript is not at all required to use MRT, but it is recommended for the best and fasted developer experience, especially when defining columns.

> Material React Table has a sister library, [Mantine React Table](https://www.mantine-react-table.com) that uses [Mantine](https://mantine.dev) components instead of Material UI, but otherwise has the same API. Check it out if you're looking for a Material UI alternative.

### Motivation

Material React Table started out as an attempt to upgrade the once popular [material-table](https://material-table.com/) library to Material UI v5 and TypeScript, since that project seemed to have become abandoned. However, after a few frustrating weeks, it was discovered that it would be easier and more fun to write a new advanced Material UI table library from scratch. [React Table](https://react-table.tanstack.com/) naturally seemed like a great basis for the underlying API and therefore was chosen as the foundation for the project.

### License

Material React Table is licensed under the [MIT License](https://github.com/KevinVandy/material-react-table/blob/v1/LICENSE) and is free to use in both personal and commercial projects.

### Features

✅ < 47kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)

✅ Advanced TypeScript Generics Support (TypeScript Optional)

✅ Aggregation and Grouping (Sum, Average, Count, etc.)

✅ Click To Copy Cell Values

✅ Column Action Dropdown Menu

✅ Column Hiding

✅ Column Ordering via Drag'n'Drop

✅ Column Pinning (Freeze Columns)

✅ Column Resizing

✅ Customize Icons

✅ Customize Styling of internal Mui Components

✅ Data Editing (4 different editing modes)

✅ Density Toggle

✅ Detail Panels (Expansion)

✅ Filtering (supports client-side and server-side)

✅ Filter Match Highlighting

✅ Full Screen Mode

✅ Global Filtering (Search across all columns, rank by best match)

✅ Header Groups & Footers

✅ Localization (i18n) support

✅ Manage your own state or let the table manage it internally for you

✅ Pagination (supports client-side and server-side)

✅ Row Actions (Your Custom Action Buttons)

✅ Row Numbers

✅ Row Ordering via Drag'n'Drop

✅ Row Selection (Checkboxes)

✅ SSR compatible

✅ Sorting (supports client-side and server-side)

✅ Theming (Respects your Material UI Theme)

✅ Toolbars (Add your own action buttons)

✅ Tree Data / Expanding Sub-rows

✅ Virtualization (react-virtual)

### Contribute

If you would like to contribute code to the project, please read the [Contributing Guide](https://github.com/kevinvandy/material-react-table/blob/v1/CONTRIBUTING.md) to learn how to get started.

#### Support the Project

If you enjoy this library, please consider supporting the project by leaving a ⭐️ on the [GitHub repository](https://github.com/kevinvandy/material-react-table).

Also consider [sponsoring me on GitHub](https://github.com/sponsors/KevinVandy) to help cover the costs of maintaining the project.

Nothing financial is required at all to support this library. The greatest help of all, actually, is to get involved in the project and community. Submitting [issues](https://github.com/kevinvandy/material-react-table/issues), [pull requests](https://github.com/kevinvandy/material-react-table/pulls), and helping others in the [Discord Server](https://discord.gg/5wqyRx6fnm) are all great ways to help out.

If you see any inaccuracies in the documentation, there is a `"Suggest an Edit For This Page on GitHub"` button at the bottom of every page that will take you directly to the page's markdown file on GitHub. You can then edit the file and submit a pull request to fix any issues.

#### Join the Development Discussion

Want to join the development discussion? Join the [Discord server](https://discord.gg/5wqyRx6fnm) to ask questions or talk about the general direction of the project(s).

#### Contributors

<Contributors />

### OSS that Makes Material React Table Possible

- [Material UI](https://mui.com/) - Components!
- [TanStack](https://tanstack.com/) - React Table and React Virtual are key underlying technologies of MRT.
- [Vercel](https://vercel.com/) - Next.js, Domains, and Hosting
- [Docsearch](https://docsearch.algolia.com/) - High quality search for static websites, free for open source projects
- [Plausible Analytics](https://plausible.io/) - Anonymous and privacy-friendly analytics (no tracking or cookies!). View the [MRT Plausible Analytics Dashboard](https://plausible.io/material-react-table.com) yourself.
- [EthicalAds](https://ethicalads.io/) - Ethical ads for open source projects (no tracking or cookies!)

### FAQs

<FAQs
  faqStructuredData={{
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: [
      {
        '@type': 'Question',
        name: 'Is Material React Table free to use?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: '<p><b>Yes</b>, <a href="https://www.material-react-table.com/about#faqs">as stated above</a>, this library uses the <b>MIT</b> License and is free to use for either personal or enterprise projects.</p>',
        },
      },
      {
        '@type': 'Question',
        name: 'Is Material React Table the same as Material Table?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: '<p><b>No</b>, Material React Table is a totally <b>new and different</b> library from <a href="https://material-table.com/" target="_blank">Material Table</a>, <b>written from scratch</b>, with a different API and different features. However, many of the features of material-table were inspirations for this library. I originally wrote this library with the goal to replace all my uses of material-table in my own enterprise applications.</p>',
        },
      },
      {
        '@type': 'Question',
        name: 'Should I use Material React Table?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: '<p>It depends. If you are already using <b>Material UI</b> for other components in your project, and are looking for a efficient and fully featured data grid component to drop in, this may be the perfect library for you. MRT is not necessarily the lightest weight table library out there, but it has a much <b>smaller bundle size</b> than similar libraries like material-table. If you are looking for the most powerful data grid possible, <a href="https://www.ag-grid.com/" target="_blank"><b>AG Grid</b></a> is still recommended above MRT as long as you do not care about bundle size.</p>',
        },
      },
    ],
  }}
/>
